pub mod context_t{
    use yew::{html, Children, Component, Context, Html, Properties};
    // use self data as Component's props
    // parent component push down the props
    #[derive(Clone, PartialEq)]
    pub struct Theme {
        foreground: String,
        background: String,
    }
    #[derive(Properties, PartialEq)]
    pub struct NavBarProps {
        theme: Theme,
    }

    pub struct NavBar;

    impl Component for NavBar {
        type Message = ();

        type Properties = NavBarProps;

        fn create(_ctx: &Context<Self>) -> Self {
            Self
        }

        fn view(&self, ctx: &Context<Self>) -> Html {
            html! {
                <div>
                    // Title function_component accept props which has type of Theme
                    <Title theme={ctx.props().theme.clone()}>
                        {"App Title"}
                    </Title>
                    // NavButton function_component accept props which has type of Theme
                    <NavButton theme={ctx.props().theme.clone()}>
                        {"Something"}
                    </NavButton>
                </div>
            }
        }
    }

    #[derive(PartialEq, Properties)]
    pub struct ThemeProps {
        theme: Theme,
        children: Children,
    }

    #[yew::function_component(NavButton)]
    fn nav_button(props: &ThemeProps) -> Html {
        html! {
            <div>
                <button style={
                    format!("background: {}; color: {};",
                    props.theme.background, props.theme.foreground)
                }>
                    {props.children.clone()}
                </button>
            </div>
        }
    }

    #[yew::function_component(Title)]
    fn title(props: &ThemeProps) -> Html {
        html! {
            <div>
                <p style={
                    format!("background-color: {}; color: {};",
                    props.theme.background, props.theme.foreground)
                }>
                    {props.children.clone()}
                </p>
            </div>
        }
    }
    /// from context.rs -> output
    #[yew::function_component(ContextShow)]
    pub fn context_show() -> Html {
        let theme = Theme {
            foreground: "yellow".to_owned(),
            background: "grey".to_owned(),
        };
        html! {
            <NavBar {theme} />
        }
    }
}